<div class="layui-fluid" id="VIEW-chart-index" lay-title="数据统计">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-extra nepadmin-c-gray">
                    <span class="nepadmin-c-blue">今日</span>&nbsp;&nbsp;
                    <span>本周</span>&nbsp;&nbsp;
                    <span>本月</span>&nbsp;&nbsp;
                    <span>全年</span>&nbsp;&nbsp;
                </div>
                <div class="layui-tab layui-tab-brief" lay-filter="chart-index-echartBar">
                    <ul class="layui-tab-title">
                        <li class="layui-this">销售额</li>
                        <li>访问量</li>
                        <li>注册量</li>
                    </ul>
                    <div class="layui-tab-content nepadmin-pad0">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row">
                                <div class="layui-col-md8">
                                    <div id="chart-index-echartBar" style="width: 100%;height:340px;"></div>
                                </div>
                                <div class="layui-col-md4">
                                    <h3 class="nepadmin-pad10 nepadmin-tc">销售额排行</h3>
                                    <div class="nepadmin-cell">
                                        <div class="nepadmin-cell-title">
                                            <span class="layui-badge">1</span> 广州商X一行将于30日莅临公司考察调研
                                        </div>
                                        <div class="nepadmin-cell-extra">100 / 400</div>
                                    </div>
                                    <div class="nepadmin-cell">
                                        <div class="nepadmin-cell-title">
                                            <span class="layui-badge layui-bg-orange">2</span> 广州商X一行将于30日莅临公司考察调研
                                        </div>
                                        <div class="nepadmin-cell-extra">100 / 400</div>
                                    </div>
                                    <div class="nepadmin-cell">
                                        <div class="nepadmin-cell-title">
                                            <span class="layui-badge layui-bg-green">3</span> 广州商X一行将于30日莅临公司考察调研
                                        </div>
                                        <div class="nepadmin-cell-extra">100 / 400</div>
                                    </div>
                                    <div class="nepadmin-cell">
                                        <div class="nepadmin-cell-title">
                                            <span class="layui-badge layui-bg-gray">4</span> 广州商X一行将于30日莅临公司考察调研
                                        </div>
                                        <div class="nepadmin-cell-extra">100 / 400</div>
                                    </div>
                                    <div class="nepadmin-cell">
                                        <div class="nepadmin-cell-title">
                                            <span class="layui-badge layui-bg-gray">5</span> 广州商X一行将于30日莅临公司考察调研
                                        </div>
                                        <div class="nepadmin-cell-extra">100 / 400</div>
                                    </div>
                                    <div class="nepadmin-cell">
                                        <div class="nepadmin-cell-title">
                                            <span class="layui-badge layui-bg-gray">6</span> 广州商X一行将于30日莅临公司考察调研
                                        </div>
                                        <div class="nepadmin-cell-extra">100 / 400</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div class="layui-card">
                <div class="layui-card-header">折线图</div>
                <div class="layui-card-body">
                    <div id="chart-index-echartLine" style="width: 100%;height:300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header">饼图</div>
                <div class="layui-card-body">
                    <div id="chart-index-echartBie" style="width: 100%;height:300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['admin', 'echarts'], function (admin, code) {
        var $ = layui.jquery;
        var view = $('#VIEW-chart-index');

        function initChart(id, option) {
            echarts.init(document.getElementById(id), layui.echartsTheme).setOption(option);
        }

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {formatter: '{value} 人'},
                axisPointer: {snap: true}
            },
            series: [{
                type: 'line',
                symbolSize: 12,
                lineStyle: {
                    normal: {
                        width: 5,
                        shadowColor: '#5a8bff',
                        shadowBlur: 40,
                        shadowOffsetY: 10
                    }
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            }]
        };
        initChart('chart-index-echartLine', option);


        var pieData = [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ];
        var option = {
            title: {
                text: '销售总额',
                subtext: '￥ 122,123',
                subtextStyle: {
                    fontSize: 18
                },
                x: '100',
                y: 'center'
            },
            legend: {
                orient: 'vertical',
                y: 'center',
                x: '50%',
                itemGap: 30,
                formatter: function (name) {
                    layui.each(pieData, function (i, item) {
                        if (item.name == name) name = name + ' {a|' + item.value + '}' + ' {a|25%}';
                    })
                    return name;
                },
                textStyle: {
                    rich: {
                        a: {
                            color: '#aaa',
                            display: 'inline-block',
                            width: 50
                        }
                    }
                },
                borderRadius: 10,
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [{
                hoverAnimation: false,
                name: '访问来源',
                type: 'pie',
                label: {
                    normal: {show: false},
                    emphasis: {show: false}
                },
                labelLine: {
                    normal: {show: false},
                    emphasis: {show: false}
                },
                radius: ['62%', '70%'],
                center: ['150', '50%'],
                avoidLabelOverlap: false,
                data: pieData
            }]
        };
        initChart('chart-index-echartBie', option);


        var option = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周五', '周六', '周日', '周日'],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{type: 'value'}],
            series: [{
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220, 334, 390, 330, 330]
            }]
        };
        initChart('chart-index-echartBar', option);

    })
</script>